<template>
    <div id="pagination">
        <el-pagination
            v-model:current-page="model.pageNum"
            v-model:page-size="model.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup lang="ts">

// 接收父组件传递数据
const props = defineProps(['total'])

const model = defineModel("list")
const emit = defineEmits(['getList'])
// 每页条数
const handleSizeChange = (val: number) => {
  model.value.pageSize = val
  emit('getList')
}
// 多少页
const handleCurrentChange = (val: number) => {
  model.value.pageNum = val
  emit('getList')
}
</script>

<style lang="scss" scoped>
#pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}
</style>